<template>
	<!-- <videoPlay ref="aplayVideo" v-bind="options" @play="onPlay" /> -->
	<videoPlay v-bind="options" :playsinline="true" />
</template>

<script setup lang="ts">
import { reactive } from 'vue'
// 视频播放组件
import { videoPlay } from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'
const props = defineProps({
	url: String
})
console.log('props.url ', props.url)

//播放器
const options = reactive({
	width: '800px', //播放器宽度
	height: '450px', //播放器高度
	color: '#409eff', //主题色
	title: '', //视频名称
	src: props.url, //视频源
	muted: false, //静音
	webFullScreen: false,
	speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
	autoPlay: false, //自动播放
	loop: false, //循环播放
	mirror: false, //镜像画面
	ligthOff: false, //关灯模式
	volume: 0.3, //默认音量大小
	control: true, //是否显示控制
	controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
})
</script>

<style scoped></style>
